<template>
  <div class="trading-app">
    <ram-heard class="box-shadow" @listenPiceChange="handlePiceChange"/>
    <div class="trading-center flex fontx">
      <div class="tcen-cen">
        <div class="cen-top">
          <ram-center-top />
        </div>
        <div class="cen-bottom box-shadow">
          <ram-center-bottom
          @listenWalletLogin="handleWalletLogin"
          @listenWalletPermission="handleWalletPermission"
          @listenRefreshOrderList="handleRefreshOrderList"
          @listenShowTip="handleShowTip"
          :ramPriceNum="ramPrice"/>
        </div>
      </div>

      <div class="tcen-right">
        <div class="top-right box-shadow mb">
          <vue-nav />
          <vue-table />
        </div>
        <div class="rtop box-shadow scrollbar">
          <ram-right-top />
        </div>
        <!-- <div class="rbottom box-shadow">
          <ram-right-bottom
          :ram-config="ramConfig"
          @listenDetailRamAction="handleDetailRamAction"/>
        </div> -->
      </div>
    </div>
    <div class="trading-bottom">
      <ram-bottom
      :refreshOrder="refreshOrder"/>
    </div>

     <!-- 订单成交详情 -->
    <el-dialog
      class="orderDetail"
      :show-close='true'
      :close-on-click-modal="false"
      :visible.sync="orderDetailVisible"
      width="900px">
      <ram-success-detail
      :order-detail-id="orderDetailId"
      @listenDetailClose="orderDetailVisible=false"/>
    </el-dialog>

    <!-- ram钱包扫码登录不能交易提示弹窗 -->
    <el-dialog
      class="ramTipBox"
      :close-on-click-modal="false"
      :visible.sync="ramVisible"
      :show-close="false"
      width="680px">
      <div class="ramTip">
        <div class="tip">{{$t('jy.ramTipCaption')}}</div>
        <div class="tip">{{$t('jy.ramTip1', {type: 'RAM'})}}</div>
        <div class="tip">{{$t('jy.ramTip2', {type: 'RAM'})}}</div>
        <div class="tip">{{$t('jy.ramTip3')}}</div>
        <div class="tip" style="margin-top: 4px;">
          <el-button class="btn" type="primary" @click="handleCloseTip">{{$t('jy.ramTipBtn')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueNav from '@/components/VueNav';
import vueTable from '@/components/VueTable';
import RamHeard from './components/RamHeard';
import RamRightTop from './components/RamRightTop';
import RamRightBottom from './components/RamRightBottom';
import RamBottom from './components/RamBottom';
import RamCenterBottom from './components/RamCenterBottom';
import RamCenterTop from './components/RamCenterTop';
import RamSuccessDetail from './components/RamSuccessDetail';
import { EosModel } from '@/utils/eos'; // eslint-disable-line

export default {
  name: 'ram-center',
  data() {
    return {
      orderDetailId: '',
      ramConfig: {
        fee: 0.005, // ram 手续费
      },
      orderDetailVisible: false,
      refreshOrder: false,
      ramVisible: false, // ram不能交易弹窗
      timerPrice: null, // 定时器
      ramPrice: 0,
    };
  },
  components: {
    RamHeard,
    RamRightTop,
    RamBottom,
    RamRightBottom,
    RamCenterBottom,
    RamCenterTop,
    RamSuccessDetail,
    vueTable,
    vueNav
  },
  watch: {
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timerPrice) {
      clearTimeout(this.timerPrice);
    }
  },
  methods: {
    handleDetailRamAction(flg, obj) {
      this.orderDetailVisible = flg;
      this.orderDetailId = obj;
    },
    // 关闭ram弹窗
    handleCloseTip() {
      this.ramVisible = false;
    },
    handleShowTip() {
      this.ramVisible = true;
    },
    handleWalletLogin() {
      this.$emit('listenWalletLogin', true);
    },
    /**
     * 钱包授权
     */
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (checkWallet && !Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 更新交易历史
    handleRefreshOrderList(val) {
      this.refreshOrder = val;
    },
    handlePiceChange(price) {
      this.ramPrice = price;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-cent-height: 910px; // 总宽度
$-rcenterTop: 464px; // 上半部分
$-rtop: 436px; // 右下上部分 219 + 207 + mb10 隐藏了最新记录

.trading-app {
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 0 30px 0;
}
.trading-center {
  padding: 0;
  margin-top: 10px;
  height: $-cent-height;

  .tcen-left {
    min-width: 278px;
    width: 278px;
    max-width: 278px;
    height: $-cent-height;
  }

  // 左边
  .tcen-cen {
    margin: 0 10px 0 0;
    flex: 1;

    .cen-top {
      margin-bottom: 10px;
      // height: ($-cent-height*6) / 11 - 5;
      height: $-rcenterTop;
    }
    .cen-bottom {
      // height: ($-cent-height*5) / 11 - 5;
      height: $-cent-height - $-rcenterTop - 10;
    }
  }

  // 右边
  .tcen-right {
    width: 287px;
    min-width: 287px;

    .top-right {
      height: $-rcenterTop;
    }

    .rtop {
      // margin-bottom: 10px;
      // height: ($-cent-height*3) / 11 - 5;
      height: $-rtop;
      // overflow: auto;
    }

    .rbottom {
      // height: ($-cent-height*7) / 11 - 5;
      // height: 220px;
      height: $-cent-height - $-rcenterTop - $-rtop - 20;
    }
  }

  .cen-top {
    .tcen-right {
      margin-left: 10px;
    }

    & .rtop, .tradcen{
      height: ($-cent-height*6) / 11 - 5;
    }

    .tradcen {
      max-width: 675px;
      flex: 1;
    }
    background: none !important;
  }
}

.box-shadow {
  border: 1px solid #eee;
  box-shadow: none;
}

.ramTipBox {
  font-size: 14px;
  margin-top: 18vh;
  .tip {
    margin-bottom: 20px;
    color: #101010;
  }
  .tip:first-child {
    color: #FF9800;
  }
  .btn {
    width: 200px;
    margin-top: 20px;
  }
}
/deep/ .el-dialog__header {
  padding: 8px;
}
.plr30 {
  padding: 0 30px;
}

.theme-278EDA {
  .trading-app .table-sty{
    background: #fff;
  }
  .trading-app {
    // background: #fff;
  }
}

.theme-1B1D27 {
  .btboxbg {
    background: $-topcolor2;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: none;
    background: $-topcolor;
  }
  .tradcen {
    width: 616px;
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor3;
  }
  .trading-bottom {
  }

  .trading-center {
    .cen-top{
    }
  }

  .ramTip {
    .tip {
      color: rgba(255, 255, 255, .75);
    }
    .tip:first-child {
      color: #FF9800;
    }
  }
}

.btbox {
  padding: 5px;
}

.orderDetail {
  /deep/ .el-dialog {
    margin-top: 25vh !important;
  }
}
.ramTip {
  text-align: center;
}
</style>

